<template>
    <section class="HouseContrast-box">
        <app-header></app-header>

        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-breadcrumb class="breadcrumb-box">
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/USEstate">美国新房</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>房源对比</a-breadcrumb-item>
                </a-breadcrumb>
                <header>
                    <h4>房源对比 ({{ HouseContrastNumber }})</h4>
                    <span>上限为3套</span>
                    <a-button type="primary" @click="deleteContrastHouse" :disabled="HouseContrastNumber>0 ? false : true"><i class="iconfont icon-whole_delete"></i> 清空对比栏</a-button>
                </header>
                <table class="table table-bordered table-hover" v-show="!noDataShow">
                    <tbody>
                        <tr>
                            <th width="10%">房源图片</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">
                                <router-link :to="{path: '/EstateDetails', query: {EstateHouseId: item.id}}">
                                    <img v-lazy="item.photo" alt="">
                                </router-link>
                                <em @click="cencelContrast(item.id)">移出对比</em>
                            </td>
                        </tr>
                        <tr class="duibi-house-tr-address">
                            <th width="10%">地址</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">{{ isNull0(item.address) }}</td>
                        </tr>
                        <tr class="duibi-house-tr-price">
                            <th width="10%">价格</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">
                                <div v-if="item.countryName == '美国'">
                                    <p v-if="item.minPrice">
                                        <span class="dollar">{{ isNull0_USD(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</span> |
                                        <span>{{ isNull0_RMB(item.minPrice, '', isCurrency(item.countryName)) }} {{ isMinMaxRMBPrice(item.maxPrice, isCurrency(item.countryName)) }}</span>
                                    </p>
                                    <p v-else>
                                        <span class="dollar">{{ isNull0_USD(item.price) }}万</span> |
                                        <span>{{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                                    </p>
                                </div>
                                <div v-else-if="item.countryName == '泰国'">
                                    <p v-if="item.minPrice">
                                        <span class="dollar">{{ isNull0_THB(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</span> |
                                        <span>{{ isNull0_RMB(item.minPrice, '', isCurrency(item.countryName)) }} {{ isMinMaxRMBPrice(item.maxPrice, isCurrency(item.countryName)) }}</span>
                                    </p>
                                    <p v-else>
                                        <span class="dollar">{{ isNull0_THB(item.price) }}万</span> |
                                        <span>{{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                                    </p>
                                </div>
                                <div v-else-if="item.countryName == '希腊'">
                                    <p v-if="item.minPrice">
                                        <span class="dollar">{{ isNull0_EUR(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</span> |
                                        <span>{{ isNull0_RMB(item.minPrice, '', isCurrency(item.countryName)) }} {{ isMinMaxRMBPrice(item.maxPrice, isCurrency(item.countryName)) }}</span>
                                    </p>
                                    <p v-else>
                                        <span class="dollar">{{ isNull0_EUR(item.price) }}万</span> |
                                        <span>{{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                                    </p>
                                </div>
                                <div v-else-if="item.countryName == '日本'">
                                    <p v-if="item.minPrice">
                                        <span class="dollar">{{ isNull0_JPY(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</span> |
                                        <span>{{ isNull0_RMB(item.minPrice, '', isCurrency(item.countryName)) }} {{ isMinMaxRMBPrice(item.maxPrice, isCurrency(item.countryName)) }}</span>
                                    </p>
                                    <p v-else>
                                        <span class="dollar">{{ isNull0_JPY(item.price) }}万</span> |
                                        <span>{{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="duibi-house-tr-area">
                            <th width="10%">面积</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">
                                <p v-if="item.minArea">{{ isNull0(item.minArea) }} {{ isMinMaxArea(item.maxArea) }}</p>
                                <p v-else>{{ isNull0(item.area, 'm²') }}</p>
                            </td>
                        </tr>
                        <tr class="duibi-house-tr-projectType">
                            <th width="10%">项目类型</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">{{ isNull0(item.type) }} | {{ isNull0(item.projectType) }}</td>
                        </tr>
                        <tr class="duibi-house-tr-investmentType">
                            <th width="10%">投资类型</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">{{ isNull0(item.investmentType) }}</td>
                        </tr>
                        <tr class="duibi-house-tr-traffic">
                            <th width="10%">交通情况</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">
                                <div v-html="isNull0(item.traffic)"></div>
                                <a-button type="primary" style="margin: 15px 0 0 0;">
                                    <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}"><i class="iconfont icon-chakan"></i> 查看详情信息</router-link>
                                </a-button>
                            </td>
                        </tr>
                        <tr class="duibi-house-tr-mating">
                            <th width="10%">配套项目</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">
                                <div v-html="isNull0(item.mating)"></div>
                            </td>
                        </tr>
                        <tr class="duibi-house-tr-school_district">
                            <th width="10%">周边学区</th>
                            <td width="30%" v-for="(item, index) in HouseContrastItem" :key="index">
                                <div v-html="isNull0(item.schoolDistrict)"></div>
                            </td>
                        </tr>
                        <a-spin :spinning="HouseContrastListLoading"/>
                    </tbody>
                </table>
                <h5 style="text-align: center; padding: 15px; height: 300px; line-height: 200px;" v-show="noDataShow">暂无对比房源，请您返回房源列表进行添加！</h5>
            </div>
        </div>

        <p v-show="false">{{getHouseContrast}}</p>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                HouseContrastIdArr: [],//记录房源对比的id
                HouseContrastNumber: 0,//房源对比栏数据的length
                HouseContrastItem: [],//房源对比栏数据
                HouseContrastListLoading: true,//列表加载loading
                noDataShow: true,//没有数据提示信息是否显示
            }
        },
        metaInfo () {
            return {
                title: '房源对比_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '房源对比_华美优胜美国房地产投资公司' },
                    { vmid: 'description', name: 'description', content: '房源对比_华美优胜美国房地产投资公司' },

                ],
            }
        },
        computed: {
            //从state获取房源对比栏的数据
            getHouseContrast() {
                if(this.$store.getters.get_HouseContrast){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_HouseContrast).length != 0){
                        this.HouseContrastIdArr = this.$store.getters.get_HouseContrast;
                        this.HouseContrastNumber = this.$store.getters.get_HouseContrast.length
                        //获取添加到房源对比栏的数据
                        this.getHouseContrastData(this.$store.getters.get_HouseContrast.join());
                    }else{
                        // if(localStorage.duibi_houseId){
                        //     this.HouseContrastIdArr = localStorage.duibi_houseId.split(',');
                        //     this.HouseContrastNumber = this.HouseContrastIdArr.length;
                        //     //获取添加到房源对比栏的数据
                        //     this.getHouseContrastData(localStorage.duibi_houseId);
                        // }
                    }
                }
                return this.$store.getters.get_HouseContrast
            },
        },
        created() {
        },
        mounted() {
        },
        methods: {
            //获取添加到房源对比栏的数据
            getHouseContrastData(IdArr) {
                this.$get(`house/comparison?ids=${IdArr}`).then(res => {
                    this.HouseContrastListLoading = false;
                    if (res.status == 0) {
                        this.HouseContrastItem = res.data;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },
            //清空对比栏
            deleteContrastHouse(){
                this.HouseContrastIdArr = [];
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);
                this.noDataShow = true;
                this.HouseContrastItem = [];
                this.HouseContrastNumber = 0;
                // localStorage.removeItem('duibi_houseId');
            },
            //取消对比
            cencelContrast (id) {
                //-----------------------把对应的值从数组删除-----------------------
                Array.prototype.removeByValue = function(val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) {
                            this.splice(i, 1);
                            break;
                        }
                    }
                };

                this.HouseContrastIdArr.removeByValue(id);
                // localStorage.duibi_houseId = this.HouseContrastIdArr;
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);

                if(this.HouseContrastIdArr.length == 0){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已清空！'
                    });
                }
            },
        },
        components: {
            'app-header': Header,//公共组件——头部
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .HouseContrast-box {
            .content {
                > .container {
                    >.breadcrumb-box{
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ddd;
                        margin: 20px 0;
                    }
                    > header {
                        margin: 10px 0;
                        text-align: left;
                        padding: 10px 0;
                        > h4 {
                            font-size: 20px;
                            display: inline-block;
                        }
                        > button {
                            float: right;
                        }
                        > span {
                            font-size: 13px;
                            color: #6F716E;
                        }
                    }
                    > table {
                        > tbody {
                            > tr {
                                > th,
                                > td {
                                    border-right: 1px solid #e4e4e4;
                                    border-bottom: 1px solid #e4e4e4;
                                    padding: 12px;
                                    text-align: center;
                                    vertical-align: middle;
                                }
                                > th {
                                    font-weight: 400;
                                    background: #f7f7f7;
                                    color: #999;
                                }
                                > td {
                                    > a {
                                        font-size: 15px;
                                        color: #000;
                                        display: block;
                                        margin: 0 auto;
                                        cursor: pointer;
                                        overflow: hidden;
                                        > img {
                                            max-height: 230px;
                                            display: block;
                                            margin: 0 auto;
                                            -webkit-transition: all linear 1s;
                                            -moz-transition: all linear 1s;
                                            transition: all linear 1s;
                                        }
                                    }
                                    > a:hover {
                                        > img {
                                            -webkit-transform: scale(1.1, 1.1);
                                            -moz-transform: scale(1.1, 1.1);
                                            transform: scale(1.1, 1.1);
                                        }
                                    }
                                    > em {
                                        font-size: 14px;
                                        color: #005aa0;
                                        display: block;
                                        cursor: pointer;
                                        margin: 4px 0;
                                    }
                                    > em:hover {
                                        color: #f65248;
                                    }
                                    p {
                                        > span.dollar {
                                            color: #f65248;
                                        }
                                    }
                                    img {
                                        max-width: 300px;
                                        display: block;
                                        margin: 0 auto;
                                        -webkit-transition: all linear 1s;
                                        -moz-transition: all linear 1s;
                                        transition: all linear 1s;
                                    }
                                }
                            }
                            .duibi-house-tr-traffic,
                            .duibi-house-tr-mating,
                            .duibi-house-tr-school_district{
                                >td{
                                    >div{
                                        text-indent: 2em;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 3;
                                        -webkit-box-orient: vertical;
                                        text-align: justify;
                                        >p:first-of-type,
                                        >span:first-of-type,
                                        >div:first-of-type{
                                            text-indent: 2em;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            display: -webkit-box;
                                            -webkit-line-clamp: 3;
                                            -webkit-box-orient: vertical;
                                            text-align: justify;
                                        }
                                        >p:not(:first-child),
                                        >span:not(:first-child),
                                        >div:not(:first-child){
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 23px;
    }
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px;
        line-height: 1.846;
        vertical-align: top;
        border-top: 1px solid #dddddd;
    }
    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #dddddd;
    }
    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }
    .table > tbody + tbody {
        border-top: 2px solid #dddddd;
    }
    .table .table {
        background-color: #ffffff;
    }
    .table-condensed > thead > tr > th,
    .table-condensed > tbody > tr > th,
    .table-condensed > tfoot > tr > th,
    .table-condensed > thead > tr > td,
    .table-condensed > tbody > tr > td,
    .table-condensed > tfoot > tr > td {
        padding: 5px;
    }
    .table-bordered {
        border: 1px solid #dddddd;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #dddddd;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }
    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #f9f9f9;
    }
    .table-hover > tbody > tr:hover {
        background-color: #f5f5f5;
    }
    table col[class*="col-"] {
        position: static;
        float: none;
        display: table-column;
    }
    table td[class*="col-"],
    table th[class*="col-"] {
        position: static;
        float: none;
        display: table-cell;
    }
    .table > thead > tr > td.active,
    .table > tbody > tr > td.active,
    .table > tfoot > tr > td.active,
    .table > thead > tr > th.active,
    .table > tbody > tr > th.active,
    .table > tfoot > tr > th.active,
    .table > thead > tr.active > td,
    .table > tbody > tr.active > td,
    .table > tfoot > tr.active > td,
    .table > thead > tr.active > th,
    .table > tbody > tr.active > th,
    .table > tfoot > tr.active > th {
        background-color: #f5f5f5;
    }
    .table-hover > tbody > tr > td.active:hover,
    .table-hover > tbody > tr > th.active:hover,
    .table-hover > tbody > tr.active:hover > td,
    .table-hover > tbody > tr:hover > .active,
    .table-hover > tbody > tr.active:hover > th {
        background-color: #e8e8e8;
    }
    .table > thead > tr > td.success,
    .table > tbody > tr > td.success,
    .table > tfoot > tr > td.success,
    .table > thead > tr > th.success,
    .table > tbody > tr > th.success,
    .table > tfoot > tr > th.success,
    .table > thead > tr.success > td,
    .table > tbody > tr.success > td,
    .table > tfoot > tr.success > td,
    .table > thead > tr.success > th,
    .table > tbody > tr.success > th,
    .table > tfoot > tr.success > th {
        background-color: #dff0d8;
    }
    .table-hover > tbody > tr > td.success:hover,
    .table-hover > tbody > tr > th.success:hover,
    .table-hover > tbody > tr.success:hover > td,
    .table-hover > tbody > tr:hover > .success,
    .table-hover > tbody > tr.success:hover > th {
        background-color: #d0e9c6;
    }
    .table > thead > tr > td.info,
    .table > tbody > tr > td.info,
    .table > tfoot > tr > td.info,
    .table > thead > tr > th.info,
    .table > tbody > tr > th.info,
    .table > tfoot > tr > th.info,
    .table > thead > tr.info > td,
    .table > tbody > tr.info > td,
    .table > tfoot > tr.info > td,
    .table > thead > tr.info > th,
    .table > tbody > tr.info > th,
    .table > tfoot > tr.info > th {
        background-color: #e1bee7;
    }
    .table-hover > tbody > tr > td.info:hover,
    .table-hover > tbody > tr > th.info:hover,
    .table-hover > tbody > tr.info:hover > td,
    .table-hover > tbody > tr:hover > .info,
    .table-hover > tbody > tr.info:hover > th {
        background-color: #d8abe0;
    }
    .table > thead > tr > td.warning,
    .table > tbody > tr > td.warning,
    .table > tfoot > tr > td.warning,
    .table > thead > tr > th.warning,
    .table > tbody > tr > th.warning,
    .table > tfoot > tr > th.warning,
    .table > thead > tr.warning > td,
    .table > tbody > tr.warning > td,
    .table > tfoot > tr.warning > td,
    .table > thead > tr.warning > th,
    .table > tbody > tr.warning > th,
    .table > tfoot > tr.warning > th {
        background-color: #ffe0b2;
    }
    .table-hover > tbody > tr > td.warning:hover,
    .table-hover > tbody > tr > th.warning:hover,
    .table-hover > tbody > tr.warning:hover > td,
    .table-hover > tbody > tr:hover > .warning,
    .table-hover > tbody > tr.warning:hover > th {
        background-color: #ffd699;
    }
    .table > thead > tr > td.danger,
    .table > tbody > tr > td.danger,
    .table > tfoot > tr > td.danger,
    .table > thead > tr > th.danger,
    .table > tbody > tr > th.danger,
    .table > tfoot > tr > th.danger,
    .table > thead > tr.danger > td,
    .table > tbody > tr.danger > td,
    .table > tfoot > tr.danger > td,
    .table > thead > tr.danger > th,
    .table > tbody > tr.danger > th,
    .table > tfoot > tr.danger > th {
        background-color: #f9bdbb;
    }
    .table-hover > tbody > tr > td.danger:hover,
    .table-hover > tbody > tr > th.danger:hover,
    .table-hover > tbody > tr.danger:hover > td,
    .table-hover > tbody > tr:hover > .danger,
    .table-hover > tbody > tr.danger:hover > th {
        background-color: #f7a6a4;
    }
    .table-responsive {
        overflow-x: auto;
        min-height: 0.01%;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
</style>
